<template>
    <div style="padding:45px;">
            <div class="case-child-end2 flex">
               <div class="flex row">
                    <div class="case-type flex">
                      <p>案件类型：</p>
                        <el-select v-model="Casevalue" placeholder="请选择" @change="getSelectChildeMenu(Casevalue)"> 
                          <el-option v-for="item in optionMenu" :key="item.Id" :label="item.Category_Name"  :value="item.Id"> </el-option>
                        </el-select>

                        <el-select v-model="Casevalue1" placeholder="请选择" style="margin-left: 10px;" @change="changeTowValue(Casevalue1)">
                        <el-option v-for="(item,index) in optionChildMenu" :key="index" :label="item.Value"  :value="item.Id"> </el-option>
                      </el-select>
                    </div>
              </div>


              <div class="flex row">
                  <div class="input flex">
                    <input placeholder="请输入关键词搜索"  v-model="SearchInput" class="case-input" @keyup.enter="searchContent"/>
                        
                    <button class="case-button" @click="searchContent()" ><i class="el-icon-search"></i></button>
                  </div>
                    <button class="dingzhi" @click="clear()">清空</button>
                    <el-button type="danger" round @click="newMubang()"><i class="el-icon-plus"></i>新建模板</el-button>
                  </div>
                  
              </div>
             <div class="selectMenu flex">
              
              
               
              </div>

              <!-- <el-table :data="tableData" border style="width: 100%" @row-click="lineCilck">
                <el-table-column prop="template_name" label="模板名称"> </el-table-column>
                <el-table-column prop="state" label="状态" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column  label="模板创建日期" prop="found_time" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  label="模板备注" prop="note" :show-overflow-tooltip="true"></el-table-column>
              </el-table> -->

              <el-row :gutter="20">
                <el-col :span="6" v-for="(vo,index) in tableData" :key="index"><div class="grid-content bg" @click="lineCilck(vo.Id)">{{vo.template_name}}</div></el-col>
                
              </el-row>

            
            <div class="block flex">
              <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
              :page-sizes="[20,50,100]" :page-size="numPage"  layout="total, sizes, prev, pager, next, jumper" :total="total1">
                </el-pagination>
            </div>

             <!--  创建合同窗口  -->
            <el-dialog  :visible.sync="dialogFormVisible" :modal-append-to-body='false' :modal='false' :before-close="Closewindows" top="300px" width="600px" >
                <div slot="title" class="dialog-title">
                  <p>新建模板</p>
                </div>

                  <el-form :model="form" class="form-select">
                      <el-form-item label="名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off" class="el-select1"></el-input>
                      </el-form-item>

                      <el-form-item label="备注" :label-width="formLabelWidth">
                        <el-input v-model="form.remark" autocomplete="off" class="el-select1"></el-input>
                      </el-form-item>
                      
                      <el-form-item label="条款" :label-width="formLabelWidth">
                            <el-select class="ceshi" v-model="value1" multiple placeholder="请选择">
                              <el-option
                                v-for="item in options"
                                :key="item.Id"
                                :label="item.terms_name"
                                :value="item.Id">
                              </el-option>
                            </el-select>
                      </el-form-item>

                      <el-form-item v-for="(v,i) in roleArr" :key="i" :label="v.Category_Name + '：'" :label-width="formLabelWidth" class="rolearr">
                        
                        <el-checkbox-group v-model="checkList" class="rolelist">
                          <el-checkbox :label="vo.Id" v-for="(vo,i) in v.twocaseType" :key="i" >{{vo.Value}}</el-checkbox>
                        </el-checkbox-group>
                
                      </el-form-item>

                  </el-form>

                  

                <div slot="footer" class="dialog-footer">
                <div class="flex dialogFormVisivleFooter">
                    <el-button type="primary" @click="add_Member()" :disabled="isDisabled">保存</el-button>
                </div>
                </div>
            </el-dialog>
             <!--  创建合同窗口  -->


             <!--  修改合同窗口  -->
            <!-- <el-dialog  :visible.sync="dialogFormVisible1" :modal-append-to-body='false' :modal='false' :before-close="Closewindows" top="300px" width="600px" >
                <div slot="title" class="dialog-title">
                  <p>修改模板</p>
                </div>

                  <el-form :model="form" class="form-select">
                      <el-form-item label="名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off" class="el-select1"></el-input>
                      </el-form-item>

                      <el-form-item label="备注" :label-width="formLabelWidth">
                        <el-input v-model="form.remark" autocomplete="off" class="el-select1"></el-input>
                      </el-form-item>

                      <el-form-item label="条款" :label-width="formLabelWidth">
                            <el-select class="ceshi" v-model="value1" multiple placeholder="请选择">
                              <el-option
                                v-for="item in options"
                                :key="item.Id"
                                :label="item.terms_name"
                                :value="item.Id">
                              </el-option>
                            </el-select>
                      </el-form-item>
                      

                      <el-form-item v-for="(v,i) in roleArr" :key="i" :label="v.Category_Name + '：'" :label-width="formLabelWidth" class="rolearr">
                        
                        <el-checkbox-group v-model="checkList" class="rolelist">
                          <el-checkbox :label="vo.Id" v-for="(vo,i) in v.twocaseType" :key="i" >{{vo.Value}}</el-checkbox>
                        </el-checkbox-group>
                
                      </el-form-item>

                  </el-form>

                  

                <div slot="footer" class="dialog-footer">
                <div class="flex dialogFormVisivleFooter">
                    <el-button type="primary" @click="upd_Member()" :disabled="isDisabled">保存</el-button>
                </div>
                </div>
            </el-dialog> -->
            <!--  修改合同窗口  -->
                

    </div>
</template>
<script>
import qs from 'qs';
export default {
    data(){
        return{
            optionChildMenu:{},

            //表格
            tableData:[],

            Casevalue:[],
            //一级下拉
            Casevalue1:'',
            //二级下拉
            Casevalue2:0,

            total1:0,

            //1下拉菜单
            optionMenu:{},
            //2下拉菜单
            optionChildMenu:{},
            
            selectOneId:1,
            Category_Id:0,
            //搜索
            SearchInput:'',
            numPage:20,
            currentPage:1,

            //新建模板窗口
            dialogFormVisible:false,
            isDisabled:false,
            formLabelWidth:'',
            form:{
              name:"",
              remark:"",
            },
            roleArr:[],
            checkList:[],

            //修改模板窗口
            dialogFormVisible1:false,
            modifyid:"",

            active:false,

            options: [],
            value1: [],

        }
    },
    methods:{

      //获取一级下拉
      getSelectMenu:function(){
          this.$http.get('/yongxu/Index/GetBoxOne').then((res)=>{
            this.optionMenu = res.data
          })
      },
      //下拉二级下拉查询
      getSelectChildeMenu:function(id){
            this.optionChildMenu = ''
            this.Casevalue1 =''
            this.selectOneId = id
            this.$http.get('/yongxu/Index/GetBoxTwo',{params:{Id:this.selectOneId}}).then((res)=>{
            this.optionChildMenu = res.data  
            this.optionChildMenu.push({Id:0,Value:'全部',Category_Id:0})
            this.Category_Id = this.Casevalue
            if(res.data.length===0){
                this.Casevalue1 = ''
            }else{
                this.Casevalue1 = 0
            }
            this.changeTowValue(this.Casevalue1)
         })
      },
      //获取二级菜单下拉
      changeTowValue:function(id){
          if(id == '' || id ==null){
            this.Casevalue2 = 0
          }else{
            this.Casevalue2 = id
          }
          console.log(this.optionChildMenu)
            this.getCaseList()
      },
      /** 
       * 获取案件列表
       * 案件全部与后面三个接口一致参数有异，这里只写此页面注释
       * ==不识别0，故使用===
       * userId 用户Id
       * Casevalue2 二级案件类型
       * statusValue && value 案件状态
       * end 最大时间
       * start 最小时间
       * SearchInput 搜索内容
       * numPage 分页每页条数
       * currentPage 当前页
      */     
        getCaseList:function(){ 
          let diy_id = ""
          if(this.Casevalue1 == ""){
              diy_id = 0
          }else{
              diy_id = this.Casevalue1
          }
         var userId = localStorage.getItem('userId')
         this.$http.post('/yongxu/Document/selmyContracttemplate',qs.stringify({
            User_Id:userId,
            dcy_id:this.Category_Id,
            template_name:this.SearchInput,
            Display_Page_Number:this.numPage,
            PageNumber:this.currentPage,
            diy_id:diy_id,
         })).then((res)=>{
            this.tableData = res.data.mapList
            this.total1 = res.data.PageCount
        })
      },

      /**  page方法start */
      handleSizeChange:function(val) {
         this.numPage = val
         this.getCaseList()
      },
      handleCurrentChange:function(val) {
        this.currentPage = val
        this.getCaseList()
      },
      /**  page方法end */

      //清空
      clear:function(){
      this.currentPage = 1
      this.Casevalue = ''
      this.Casevalue2 = 0
      this.SearchInput=''
      this.Casevalue1 = ''
      this.Category_Id=0
      // console.log(this.Casevalue2)
      this.getCaseList()  
      },

      //搜索查询
      searchContent:function(){
       this.getCaseList()
      },

      //新建模板窗口 总体方法start
      newMubang(){
          this.$router.push({path:'/index/contractoutIndex/contractadd'})
          // this.dialogFormVisible = true
          // this.$http.post('/yongxu/Document/getCasetype',qs.stringify({
           
          // })).then((res)=>{
          //     console.log(res.data)
          //     this.roleArr = res.data
          // })
          // this.$http.post('/yongxu/Document/getContractterms',qs.stringify({
           
          // })).then((res)=>{
          //     console.log(res.data)
          //     this.options = res.data
          // })
      },
      Closewindows(){
          this.dialogFormVisible = false
          this.dialogFormVisible1 = false
      },
      add_Member(){
          if(this.form.name===""||this.form.name==null){
                this.$message({
                    message:'模板名称不能为空',
                    type:'warning'
                });
                return false
          }
          if(this.value1===""||this.value1==null){
                this.$message({
                    message:'条款不能为空',
                    type:'warning'
                });
                return false
          }
          if(this.checkList===""||this.checkList==null){
                this.$message({
                    message:'案件类型不能为空',
                    type:'warning'
                });
                return false
          }
          let terms = []
          for(let i = 0; i < this.value1.length; i++){
              terms.push({"terms_id":this.value1[i],"terms_order":i})
          }
          this.$http.post('/yongxu/Document/addContracttemplate',qs.stringify({
              User_Id:localStorage.getItem('userId'),
              template_name:this.form.name,
              note:this.form.remark,
              str:JSON.stringify(this.checkList),
              terms:JSON.stringify(terms)
          })).then((res)=>{
              if(res.data.sign == 200){
                this.$message({
                  message:"模板添加成功",
                  type:'success'
                })
                this.dialogFormVisible = false
                this.form.name = ""
                this.form.remark = ""
                this.checkList = []
                this.getCaseList()  
              }else if(res.data.sign == 300){
                this.$message({
                  message:"模板重名,请修改名称后重新添加",
                  type:'warning'
                })
              }
          })
      },
      //新建模板窗口 总体方法end
      
      /**
       * 点击模板查看详情
       */
      lineCilck(row){
          this.$router.push({path:'/index/contractoutIndex/contracttemplate?id=' + row})
          // this.$http.post('/yongxu/Document/getCasetype',{
          // }).then((res)=>{
          //     this.roleArr = res.data
          // })
          // this.$http.post('/yongxu/Document/showmyContracttemplatedetails',qs.stringify({
          //     Id:row
          // })).then((res)=>{
          //     this.modifyid = row
          //     this.dialogFormVisible1 = true
          //     this.form.name = res.data.template_name
          //     this.form.remark = res.data.note
          //     // this.checkList = []
          //     res.data.twoCasetypelists.forEach(element => {
          //         this.checkList.push(element.diy_id)
          //     });
          // })
      },
      /**
       * 修改接口
      */
      upd_Member(){
          this.$http.post('/yongxu/Document/updmyContracttemplatepreserve',qs.stringify({
              User_Id:localStorage.getItem('userId'),
              Id:this.modifyid,
              template_name:this.form.name,
              note:this.form.remark,
              str:JSON.stringify(this.checkList)
          })).then((res)=>{
              if(res.data.sign == 200){
                this.$message({
                  message:"模板修改成功",
                  type:'success'
                })
                this.dialogFormVisible1 = false
                this.form.name = ""
                this.form.remark = ""
                this.checkList = []
                this.getCaseList()  
              }else if(res.data.sign == 300){
                this.$message({
                  message:"模板重名,请修改名称后重新添加",
                  type:'warning'
                })
              }
          })
      },
    },
    mounted:function(){
        // this.getBranchList()
        this.getSelectMenu()
        this.getCaseList()
        // this.getCustomList()
        // this.getCustomTypeList()
    },
    

    
}
</script>
<style lang="scss">
@import '../../assets/sass/main.css';
.input{
    flex-direction: row;
    justify-content: flex-start;
    width: 250px;
    margin-right: 20px;
    border-radius: 45px;
    border: 1px solid #DDDDDD;
    
}
.case-input{
      width:  200px;
    height: 36px;
    /* border: 1px solid #DDDDDD; */
    border-top-left-radius: 45px;
    border-bottom-left-radius: 45px;
   
    padding-left: 21px;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    color: #4a4a4a;
    background-color: transparent;
}
.case-button{
    outline: none;
    width: 48px;
    height: 28px;
    border: none;
    border-radius: 36px 36px 36px 36px;
    background-color: #fefeff;
    margin-right: 4px;
    margin-top: 4px;
    cursor: pointer;
}
 .input:hover{
    border: 1px solid #7E2C2E;
}
.case-button:hover{
    background: #7E2C2E;
    color: #ffffff;
}
.case-child-end2{
    flex-direction: row;
    justify-content:space-between;
}
.selectMenu{
    margin-top: 20px;
}
.export{
  width: 25px;
  height: 25px;
  background: #7E2C2E;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}
.el-table-column--selection .cell{
  padding: 0 !important;
}
// .dingzhi{
//   margin-right:20px;
//   height: 38px;
// }
.el-select1{
  width: 80% !important;
}
.rolearr .el-form-item__label{
  width: 100%;
  text-align: left;
}
.bg{
  display: flex;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  cursor:pointer;
  justify-content: center;
  align-items: center;
  margin-bottom:25px;
}
.bg:hover{
  color:#7E2C2E;
}
.ceshi{
  width: 80%!important;
  
}
.tiaokuan{
  .el-select{
    width: 80%;
  }
  .el-input__inner{
    height: 50px
  }
}
// .ceshi .el-input__inner{
//   height: 50px!important;
// }
// .add{
//   img{
//     width: 25px;
//     height: 25px;
//     margin-right:5px;
//   }
// }
// .add:hover{
//     .hoverer{
//       display: block;
//     }
//     .mo{
//       display: none;
//     }
// }
// .mo{
//   display: block;
// }
// .hoverer{
//   display: none;
// }
</style>

